<template>
    <div class="p-[10px]">

        <n-card size="huge" hoverable>
            <n-alert type="success">
                您的默认分组为：default，分组倍率为：1
            </n-alert>
            <n-alert style="margin: 15px 0;" type="info">
                按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）
            </n-alert>
            <!-- 搜索 -->
            <n-form inline :label-width="80" :model="formValue">
                <n-form-item path="token_name">
                    <n-input v-model:value="tipvalue" placeholder="模型名称" />
                </n-form-item>
                <n-form-item>
                    <n-button type="primary" @click="coopySelect"> 复制选中的模型 </n-button>
                </n-form-item>
            </n-form>

            <n-data-table :row-key="rowKey" @update:checked-row-keys="handleCheck" :columns="columns" :data="datas"
                :bordered="false" :pagination="true" />
        </n-card>
    </div>
</template>

<script setup lang="ts">
import { defineProps, h, ref, onMounted, computed } from "vue";
import {
    NDataTable,
    NTag,
    NRow,
    NCol,
    NStatistic,
    NCard,
    NFormItem,
    NForm,
    NInput,
    NButton,
    NDatePicker,
    NAlert,
    NIcon,
    useMessage
} from "naive-ui";
import { fetchLog, fetchLogStat, fetchpricing } from "@/api/index";
import * as dayjs from "dayjs";

const props = defineProps();
const formValue = ref({
    token_name: "",
    model_name: "",
    datetimerange: "",
    p: 1,
    page_size: 99999,
});
const data = ref([]);
const stat = ref({});
const rowKey = (row: RowData) => row.model_name;
const message = useMessage();

const checkedRowKeysRef = ref([])
function handleCheck(rowKeys: DataTableRowKey[]) {
    checkedRowKeysRef.value = rowKeys
}
const columns = [
    {
        type: 'selection',
        disabled(row: RowData) {
            return row.name === 'Edward King 3'
        }
    },
    {
        title: "可用性",
        key: "owner_by",
        render(record) {
            return h(
                NTag,
                {
                    type: "success",
                    bordered: false
                },
                {
                    default: () => "可用",
                }
            );
        },
    },
    {
        title: "模型名称",
        key: "model_name",
        render(record) {
            return h(
                NTag,
                {
                    type: "info",
                },
                {
                    default: () => record["model_name"] || "--",
                }
            );
        },
    },
    {
        title: "计费类型",
        key: "quota_type",
        render(record) {
            return "按量计费";
        },
    },
    {
        title: "可用分组",
        key: "model_name",
        render(record) {
            return h(
                NTag,
                {
                    type: "info",
                },
                {
                    default: () => record["enable_groups"][0] || "--",
                }
            );
        },
    },
    {
        title: "倍率",
        key: "completion_ratio",
        render(record) {
            return h('div', [
                h('div', {}, { default: () => '模型倍率: ' + record['model_ratio'] || "--", }),
                h('div', {}, { default: () => '补全倍率: ' + record['completion_ratio'] || "--", }),
                h('div', {}, { default: () => '分组倍率: 1' })
            ])
        },
    },
    {
        title: "模型价格",
        key: "completion_ratio",
        render(record) {
            return h('div', [
                h('div', {}, { default: () => '提示 ' + (record['model_ratio'] * 2) + ' / 1M tokens' }),
                h('div', {}, { default: () => '补全 ' + (record['model_ratio'] * 2) * record['completion_ratio'] + ' / 1M tokens' }),
            ])
        },
    }
];
const tipvalue = ref("")
const datas = computed(e => {
    let s = data.value.map(e => {
        return e.model_name.includes(tipvalue.value) ? e : null;
    }).filter(e => e);
    console.log([...s])
    return [...s]
})
const getLog = async () => {
    // 查询条件
    // const params = {
    //     ...formValue.value,
    //     start_timestamp: formValue.value.datetimerange
    //         ? formValue.value.datetimerange[0]
    //         : "",
    //     end_timestamp: formValue.value.datetimerange
    //         ? formValue.value.datetimerange[1]
    //         : "",
    //     datetimerange: undefined,
    // };
    // const res = await fetchLog(params);
    // const res1 = await fetchLogStat(params);
    // data.value = res.data.items;
    let res1 = await fetchpricing()
    data.value = res1.data;
};
function coopySelect() {
    console.log(checkedRowKeysRef.value.join(","));

    message.success("已复制:" + checkedRowKeysRef.value.join(","))
    copy2(checkedRowKeysRef.value.join(","))
    // 至剪贴板
}
function copy2(content) {
    const dom = document.createElement("input");
    dom.value = content;
    document.body.appendChild(dom);
    dom.select();
    document.execCommand("copy");
    document.body.removeChild(dom);
}
onMounted(() => {
    getLog();
});
</script>
